<template>
  <!-- 文章列表页面 -->
  <div class="article-list">
    <h1>文章列表</h1>
    <!-- 标签筛选组件，支持选择标签过滤文章 -->
    <TagFilter :tags="blog.allTags" v-model:selectedTag="selectedTag" />
    <!-- 跳转到新建文章页面 -->
    <router-link to="/editor">
      <button style="margin-bottom:16px;">新建文章</button>
    </router-link>
    <!-- 遍历并渲染文章列表 -->
    <div v-for="article in filteredArticles" :key="article.id" class="article-item">
      <!-- 点击标题跳转到详情页 -->
      <h2 @click="goDetail(article.id)" class="article-title">{{ article.title }}</h2>
      <div class="article-meta">
        <span>作者：{{ article.author }}</span>
        <span>标签：<span v-for="tag in article.tags" :key="tag" class="tag">{{ tag }}</span></span>
      </div>
      <p class="article-summary">{{ article.summary }}</p>
    </div>
  </div>
</template>

<script setup>
// 引入 Vue 的 Composition API
import { ref, computed } from 'vue'
// 引入路由，用于页面跳转
import { useRouter } from 'vue-router'
// 引入标签筛选组件
import TagFilter from '../components/TagFilter.vue'
// 引入 Pinia 博客 store
import { useBlogStore } from '../stores/blog'

// 获取博客 store 实例
const blog = useBlogStore()
// 当前选中的标签
const selectedTag = ref('')
// 根据标签筛选文章，未选标签则显示全部
const filteredArticles = computed(() => {
  if (!selectedTag.value) return blog.articles
  return blog.articles.filter(a => a.tags.includes(selectedTag.value))
})
// 获取路由实例
const router = useRouter()
// 跳转到文章详情页
function goDetail(id) {
  router.push({ path: `/article/${id}` })
}
</script>

<style scoped>
/* 页面样式，居中显示，卡片风格 */
.article-list {
  max-width: 800px;
  margin: 40px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #e3e3e3;
  padding: 32px;
}
.article-item {
  border-bottom: 1px solid #eee;
  padding: 16px 0;
}
.article-title {
  color: #409eff;
  cursor: pointer;
  margin: 0;
}
.article-title:hover {
  text-decoration: underline;
}
.article-meta {
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
}
.tag {
  background: #e3f0ff;
  color: #409eff;
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 4px;
  font-size: 12px;
}
.article-summary {
  margin: 0;
  color: #333;
}
</style> 